<!-- 创建一个评论组件 其中包括用户头像,姓名,评论时间,标题,评论内容-->
<template>
  <div class="comment">
    <div class="userInfo">
      <img class="avatar" :src="user.avatar" alt="User Avatar" />
      <div class="info">
        <h3 class="name">{{ user.name }}</h3>
      </div>
    </div>
    <div class="commentInfo">
      <h2 class="title">{{ comment.title }}</h2>
      <p class="content">{{ comment.content }}</p>
      <p class="time">{{ comment.time }}</p>
    </div>
    <ul class="tools">
      <li>
        <span
          ><span
            ><svg
              focusable="false"
              viewBox="0 0 1024 1024"
              fill="currentColor"
              width="20"
              height="20"
              aria-hidden="true"
            >
              <g>
                <path
                  d="M474.1731 112c-18.9701 0-36.1608 11.1725-43.8642 28.5082L280.1358 478.456A48 48 0 0 0 276 497.9478V911c0 26.5097 21.4903 48.0048 48 48.0048h436.252-.5357c61.3753.6784 113.8776-43.9592 123.0806-104.6476l51.798-337.8707c5.4294-35.7783-5.103-72.0607-28.7977-99.3154l-.7141-.8142c-23.4316-26.4793-57.1259-41.6043-92.483-41.513l-.6771.0041H634.802l.001-102.1987C634.803 183.9272 562.8878 112 474.173 112zm28.3009 102.514.506.2474c21.2353 10.5943 35.823 32.5364 35.823 57.8879v150.199c0 26.5097 21.4903 48 48 48l225.5324-.0008.2727-.0023c7.9422-.0903 15.5267 3.3143 20.7399 9.311a27.109 27.109 0 0 1 6.3445 21.855l-51.7987 337.8756c-2.0178 13.3058-13.3664 23.0703-26.6996 23.1177H372V508.131l130.474-293.617z"
                ></path>
                <path
                  d="m223.832 445.012.6254.0078c-68.3137-1.209-126.8272 52.9355-136.0247 120.9665A48 48 0 0 0 88 572.4172v263.3314a48 48 0 0 0 .4327 6.431l.2898 2.0287c9.9457 66.0991 66.8558 114.9731 133.686 114.7918l1.2675-.0141 100.324.0002c26.5097 0 48-21.4903 48-48v-417.974l-.0064-.7937c-.424-26.1436-21.749-47.2062-47.9936-47.2062l-100.168-.0003zm-2.1548 95.9942.5068-.0062 1.424.0123L276 541.012v321.974l-52.392.0002-.4247.0019-1.0148.012c-18.4628.0497-34.3058-12.9072-38.0996-30.7884L184 831.879V576.243l.1115-.5453c4.0676-19.3121 20.8022-34.351 37.5657-34.6915z"
                ></path>
              </g></svg></span
          >点赞</span
        >
      </li>

      <li>
        <span
          ><span
            ><svg
              focusable="false"
              viewBox="0 0 1024 1024"
              fill="currentColor"
              width="20"
              height="20"
              aria-hidden="true"
            >
              <g>
                <path
                  d="M815 164H209c-79.529 0-144 64.471-144 144v406.2857l.0193 2.3813C66.2909 795.0977 130.2663 858.2857 209 858.2857l35.549-.0007.001 20.1563c0 44.1827 35.8172 80 80 80h.797a80.04 80.04 0 0 0 41.9912-12.4044L505.965 858.285l309.035.0007c79.529 0 144-64.471 144-144V308c0-79.529-64.471-144-144-144zm-606 96h606c26.5097 0 48 21.4903 48 48v406.2857c0 26.5097-21.4903 48-48 48H492.05l-.649.0044a48 48 0 0 0-25.0239 7.4382L340.549 849.377l.001-39.0913c0-26.5097-21.4903-48-48-48H209c-26.5097 0-48-21.4903-48-48V308c0-26.5097 21.4903-48 48-48z"
                ></path>
                <path
                  d="M313 434c26.2446 0 47.5697 21.0627 47.9936 47.2062L361 482v59c0 26.5097-21.4903 48-48 48-26.2446 0-47.5697-21.0627-47.9936-47.2062L265 541v-59c0-26.5097 21.4903-48 48-48zM513 434c26.2446 0 47.5697 21.0627 47.9936 47.2062L561 482v59c0 26.5097-21.4903 48-48 48-26.2446 0-47.5697-21.0627-47.9936-47.2062L465 541v-59c0-26.5097 21.4903-48 48-48zM711 434c26.2446 0 47.5697 21.0627 47.9936 47.2062L759 482v59c0 26.5097-21.4903 48-48 48-26.2446 0-47.5697-21.0627-47.9936-47.2062L663 541v-59c0-26.5097 21.4903-48 48-48z"
                ></path>
              </g></svg></span
          >评论</span
        >
      </li>

      <li>
        <span
          ><span
            ><svg
              focusable="false"
              viewBox="0 0 20 20"
              fill="currentColor"
              width="20"
              height="20"
              aria-hidden="true"
            >
              <path
                fill="currentColor"
                fill-rule="nonzero"
                d="M10.4444 2.0766c.1981.0978.3585.2581.4562.4562l2.0512 4.1563 4.5865.6665c.549.0798.9293.5895.8496 1.1385a1.0045 1.0045 0 0 1-.293.5748l-3.3188 3.2353.7835 4.5682c.0938.5468-.2734 1.066-.8201 1.1598a1.0044 1.0044 0 0 1-.6372-.101l-4.1024-2.1567-4.1023 2.1568c-.491.2581-1.0983.0694-1.3564-.4217a1.0045 1.0045 0 0 1-.101-.6372l.7835-4.5682L1.905 9.0689c-.3972-.3872-.4054-1.0231-.0182-1.4204a1.0044 1.0044 0 0 1 .5748-.2929l4.5866-.6665 2.0512-4.1563c.2455-.4975.8477-.7017 1.3451-.4562zM10 4.944 8.7295 7.519a1.875 1.875 0 0 1-1.2474.9942l-.1644.0314-2.8417.4124 2.0565 2.0045c.4018.3916.605.9401.5602 1.4936l-.021.166L6.586 15.45l2.5414-1.3351a1.875 1.875 0 0 1 1.5782-.0776l.1669.0776L13.413 15.45l-.4849-2.8289a1.875 1.875 0 0 1 .4247-1.5375l.1145-.122L15.523 8.957l-2.8409-.4124a1.875 1.875 0 0 1-1.331-.879l-.0807-.1467L10 4.944z"
              ></path></svg></span
          >收藏</span
        >
      </li>
      <li class="more">
        <span>···</span>
        <!-- 这是一个举报悬浮框 -->
        <div class="report">
          <ul>
            <li>举报</li>
            <li>屏蔽</li>
          </ul>
        </div>
      </li>

    </ul>
  </div>
</template>

<script setup>
import { defineProps } from 'vue'
const props = defineProps({
  user: {
    type: Object,
    required: true
  },
  comment: {
    type: Object,
    required: true
  }
})
</script>

<style scoped>
.comment {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  padding: 20px 0 10px 0;
}

.comment + .comment {
  border-top: 1px solid #b6b6b6;
}

.comment .userInfo {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  cursor: pointer;
}



.name {
  margin: 0;
  font-size: var(--font-16);
  font-weight: 400;
}

.time {
  margin: 0;
  font-size: var(--font-16);
  color: gray;
}

.title {
  margin: 10px 0;
  font-size: var(--font-20);
}

.content {
  margin: 0;
  font-size: var(--font-16);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #666;
  background-color: #e9ebeb;
  border-radius: 6px;
  height: 100px;
  padding: 12px 24px;
}
.tools{
  display: flex;
  padding: 10px 0;
  justify-content: end;
}

.tools li {
  margin-right: 20px;
  font-size: var(--font-16);
  color: #666;
  text-align: center;
  align-items: center;
  cursor: pointer;
}

.tools li span {
  display: flex;
  align-items: center;
}

.tools li:hover {
  color: #62eccc;
}

.more{
  font-size: var(--font-16);
  font-weight: 700;
  text-align: center;
  color: #666;
  cursor: pointer;
  position: relative;
}

.more::after{
  content: ' ';
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  background-color: transparent;
  top: 100%;
}

.more:hover{
  color: #62eccc;
}

.report{
  display: none;
}

.more:hover .report{
  display: block;
  position: absolute;
  width: 100px;
  top: 30px;
  left: 0;
  background-color: #fff;
  border: 1px solid #f0f0f0;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
